<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>首页</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--图片滑动css-->
		<link rel="stylesheet" href="css/swiper.min.css" />
		<!--图标库-->
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.bar,
			.page,
			.page-group,
			header,
			.content-padded {
				padding: 0px;
				margin: 0px;
			}
			
			.bar-header-secondary {
				position: fixed;
				top: 0px;
			}
			
			.bar .searchbar {
				margin: 0px 0px;
			}
			
			.content-block {
				margin: 0px 0px;
				padding: 0px 0px;
			}
			
			.swiper-container {
				height: 8rem;
			}
			
			.swiper-container img {
				position: absolute;
				top: -2rem;
			}
			
			.cen {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 4rem;
				margin-top: 0.6rem;
			}
			
			.yuan {
				width: 4rem;
				height: 4rem;
				border-radius: 50%;
				background: white;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.juxing {
				width: 14rem;
				height: 3rem;
				border-radius: 0.5rem;
				background: white;
				margin-left: -1rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 1.5rem;
				padding-right: 0.6rem;
			}
			
			.xiaoyuan {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				background: #45b7fe;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.fa-file-text-o {
				color: white;
			}
			
			.juxing>div:nth-of-type(1) {
				color: #46b6fe;
				font-size: 1rem;
			}
			
			.juxing>div:nth-of-type(2) {
				color: #b5b5b5;
			}
			
			#tab1>div:nth-of-type(3) {
				margin-top: -0.5rem;
				width: 100%;
				height: 2rem;
				border-radius: 0.5rem;
				background: white;
				line-height: 2rem;
			}
			
			#tab1>div:nth-of-type(3)>p {
				color: black;
				font-size: 0.8rem;
				margin-left: 1rem;
				font-weight: 550;
			}
			
			.kecheng {
				background: white;
				margin-top: 0.2rem;
				width: 100%;
				padding-top: 1rem;
				display: none;
			}
			
			.kecheng>div:nth-of-type(1) {
				display: flex;
				align-items: center;
			}
			
			.kecheng>div:nth-of-type(1)>span:nth-of-type(1) {
				color: white;
				display: inline-block;
				text-align: center;
				background: #838d98;
				font-size: 0.6rem;
				padding: 0.2rem;
				border-radius: 0.2rem;
				margin-left: 1rem;
			}
			
			.kecheng>div:nth-of-type(1)>span:nth-of-type(2) {
				font-weight: 550;
				color: #000000;
				margin-left: 0.2rem;
			}
			
			.kecheng>div:nth-of-type(2) {
				font-size: 0.65rem;
				margin-top: 0.4rem;
			}
			
			.kecheng>div:nth-of-type(2)>span:nth-of-type(1) {
				margin-left: 1rem;
			}
			
			.kecheng>div:nth-of-type(2)>span:nth-of-type(2) {
				margin-left: 0.2rem;
			}
			
			.kecheng>div:nth-of-type(2)>span:nth-of-type(3) {
				margin-left: 0.4rem;
			}
			
			.kecheng>div:nth-of-type(3) {
				margin-top: 0.5rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding-bottom: 0.5rem;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(1) {
				margin-left: 1rem;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(1)>img {
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(1)>div {
				font-size: 0.6rem;
				text-align: center;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(2) {
				margin-right: 1rem;
				color: #ff773a;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(2)>span:nth-last-of-type(1) {
				font-size: 0.8rem;
			}
			
			.kecheng>div:nth-of-type(3)>div:nth-of-type(2)>span:nth-last-of-type(1) {
				font-size: 1.2rem;
				margin-left: 0.3rem;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<header class="bar bar-nav">
					<div class="bar bar-header-secondary">
						<div class="searchbar">
							<a class="searchbar-cancel">取消</a>
							<div class="search-input">
								<label class="icon icon-search" for="search"></label>
								<input type="search" id='search' placeholder='请输入课程或者教师名称' />
							</div>
						</div>
					</div>
				</header>
				<nav class="bar bar-tab">
					<a class="tab-item active" href="#">
						<span class="icon icon-home"></span>
						<span class="tab-label">首页</span>
					</a>
					<a class="tab-item external" href="1对1.html">
						<span class="icon icon-browser"></span>
						<span class="tab-label">1对1</span>
					</a>
					<a class="tab-item external" href="拍照搜题.html">
						<span class="icon icon-search"></span>
						<span class="tab-label">拍照</span>
					</a>
					<a class="tab-item external" href="朋友圈.html">
						<span class="icon icon-friends"></span>
						<span class="tab-label">朋友圈</span>
					</a>
					<a class="tab-item external" href="我的.html">
						<span class="icon icon-me"></span>
						<span class="tab-label">我</span>
					</a>
				</nav>
				<div class="content">
					<div class="content">
						<div class="buttons-tab">
							<a href="#tab1" class="tab-link active button">全部</a>
							<a href="#tab2" class="tab-link button">全部课程</a>
							<a href="#tab3" class="tab-link button">免费课程</a>
						</div>
						<div class="content-block">
							<div class="tabs">
								<div id="tab1" class="tab active">
									<!--图片滑动-->
									<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal">
										<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-8376px, 0px, 0px);">
											<div class="swiper-slide" style="margin-right: 30px;"><img src="imges/image1.jpg" /></div>
											<div class="swiper-slide" style="margin-right: 30px;"><img src="imges/image2.png" /></div>
											<div class="swiper-slide" style="margin-right: 30px;"><img src="imges/image3.jpg" /></div>
											<div class="swiper-slide" style="margin-right: 30px;"><img src="imges/image4.png" /></div>
										</div>
										<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
											<span class="swiper-pagination-bullet"></span>
											<span class="swiper-pagination-bullet"></span>
											<span class="swiper-pagination-bullet"></span>
										</div>
									</div>
									<div class="cen">
										<div class="yuan">
											<div class="xiaoyuan">
												<span class="fa fa-file-text-o fa-2x"></span>
											</div>
										</div>
										<div class="juxing">
											<div>公开课</div>
											<div><span class="fa fa-angle-right fa-2x"></span></div>
										</div>
									</div>
									<div>
										<p>课程精选</p>
									</div>
									<div class="kecheng" id="kecheng">
										<div class="kecheng1"><span>实用英语</span><span>逻辑英语·跨年红包雨班</span></div>
										<div class="kecheng2"><span>开课时间:</span><span>2017-02-05  08:00</span><span>53课时</span></div>
										<div class="kecheng3">
											<div class="shuzi">
												<img src="https://oimagec7.ydstatic.com/image?id=2375325558000401482&product=bisheng" />
												<div>刘宇</div>
											</div>
											<div><span>&yen;</span><span>699</span></div>
										</div>
									</div>
								</div>
								<div id="tab2" class="tab">
									<div class="content-block">
										<p>This is tab 2 content</p>
									</div>
								</div>
								<div id="tab3" class="tab">
									<div class="content-block">
										<p>This is tab 3 content</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			jQuery.noConflict();
		</script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script>
			var swiper = new Swiper('.swiper-container', {
				spaceBetween: 30,
				centeredSlides: true,
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		</script>
		<script>
			$(start);

			function start() {
				$.getJSON("json/3.json", function(data) {
					for(var key in data) {
						datas = data[key];
						console.log(datas);
						for(var i = 0; i < datas.length; i++) {
							var $prevo = $("#kecheng").clone(true);
							$prevo.find(".kecheng1 span").eq(0).text(datas[i].categoryName);
							$prevo.find(".kecheng1 span").eq(1).text(datas[i].courseTitle);
							$prevo.find(".kecheng2 span").eq(1).text(datas[i].courseTime);
							$prevo.find(".kecheng2 span").eq(2).text(datas[i].lessonNum + "课时");
							$prevo.find(".kecheng3>div:nth-of-type(1) img").attr("src", datas[i].teacherList["0"].imgUrl);
							$prevo.find(".kecheng3>div:nth-of-type(1) div").text(datas[i].teacherList["0"].name);
							$prevo.find(".kecheng3>div:nth-of-type(2)>span:nth-of-type(2)").text(datas[i].courseSalePrice);
							$prevo.show();
							$("#tab1").append($prevo);
						}
					}
				})
			}
		</script>
	</body>

</html>